<template>
  <div class="page-container">
    <page-header
      zhTitle="加入达坦"
      enTitle="Join Tartan"
      :pageHeaderImage="pageHeaderImage"
    ></page-header>
    <div class="tartan-container" style="margin-top:0">
      <div class="tartan-item app-container">
        <h2 class="title">
          招聘信息
        </h2>
        <p class="describe">
          达坦能源集团（Tartan Energy Group）创始于加拿大，经过20多年不懈努力，
          从一家地域化的油气设备供应商发展为知名的跨国油服集团，不断的追求技术进步是达坦走向成功的关键。
        </p>
        <p class="describe">
          达坦能源科技（上海）有限公司是达坦集团在中国的运营平台，是上海市高新技术企业。
          国家的能源战略为企业提供了广阔持久的发展空间，深厚的技术储备为达坦提供了强大的市场竞争力，
          充满激情的创业团队凝聚了一批高素质多元化的业内精英。公司工程技术人员占比超过70%。
          “专业、开放、创新、有担当”是达坦的企业文化，加入达坦，意味着您能够在一个开放包容的国际舞台上，
          与不同文化背景、不同专业知识的伙伴，共同从事一项造福人类的事业，在达坦这个舞台上留下您的印记，
          实现自己的人生价值！
        </p>
      </div>
    </div>
    <div class="tartan-container" style="padding-top:20px;padding-bottom:40px">
      <div class="tartan-item app-container">
        <div style="display:flex;">
          <div style="flex:1 0 0;margin-right:100px">
            <div>
              <div style="display:flex">
                <div style="flex:3 0 0">
                  <div style="font-size:19px;padding:14px 0;color:#50565B">
                    姓名*
                  </div>
                  <el-input
                    style="width:90%"
                    placeholder="请输入您的姓名"
                    v-model="testSelect"
                  >
                  </el-input>
                </div>
                <div style="flex:2 0 0">
                  <div style="font-size:19px;padding:14px 0;color:#50565B">
                    手机号码*
                  </div>
                  <el-input
                    style="width:100%"
                    placeholder="请输入您的手机号"
                    v-model="testSelect"
                  >
                  </el-input>
                </div>
              </div>
            </div>

            <div style="display:flex">
              <div style="flex:3 0 0">
                <div style="font-size:19px;padding:14px 0;color:#50565B">
                  电子邮箱*
                </div>
                <el-input
                  style="width:90%"
                  placeholder="请选择您的电子邮箱"
                  v-model="testSelect"
                >
                </el-input>
              </div>
              <div style="flex:2 0 0">
                <div style="font-size:19px;padding:14px 0;color:#50565B">
                  所在城市*
                </div>
                <el-select
                  style="width:100%"
                  placeholder="请选择您所在的城市"
                  v-model="testSelect"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div>
              <div style="font-size:19px;padding:14px 0;color:#50565B">
                申请职位*
              </div>
              <el-select
                style="width:100%"
                placeholder="请选择您要申请的职位"
                v-model="testSelect"
              >
              </el-select>
            </div>
          </div>
          <div style="flex:1 0 0">
            <div style="font-size:19px;padding:14px 0;color:#50565B">
              相关说明*
            </div>
            <el-input :rows="6" type="textarea" v-model="testArea"></el-input>
            <div
              style="height:54px;margin-top:24px;display:flex;align-items:center"
            >
              <tartan-btn style="width:200px;height:100%;margin-right:10px"
                >发送给我们</tartan-btn
              >
              <el-upload>
                <img height="44px" src="../../../public/img/files.png" alt="" />
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "../../components/PageHeader.vue";
import pageHeaderImage from "../../../public/img/bg_jrdt.png";
import TartanBtn from "../../components/TartanBtn.vue";
import { mapState } from "vuex";
export default {
  name: "joinus",
  asyncData({ store, i18n }) {
    return store.dispatch("GET_CITY_LIST", i18n.locale);
  },
  components: {
    PageHeader,
    TartanBtn,
  },
  data() {
    return {
      pageHeaderImage,
      test: "",
      testSelect: "",
      testArea: "",
    };
  },
  computed: {
    ...mapState(["cityList"]),
  },
  methods: {},
};
</script>

<style lang="scss">
.el-input {
  font-size: 20px;

  .el-input__inner {
    color: #004f7e;
    border-radius: 0;
    border: 1px solid #004f7e;
    height: 54px;
    padding: 0 7px;
  }
}
.el-textarea {
  font-size: 20px;
  .el-textarea__inner {
    color: #004f7e;
    border-radius: 0;
    border: 1px solid #004f7e;
    min-height: 54px;
    padding: 0 7px;
  }
}
.el-select-dropdown {
  border-radius: 0;

  margin-top: 0 !important;
  .el-select-dropdown__item {
    padding: 0 7px;
    font-size: 16px;
  }
  .popper__arrow {
    display: none;
  }
}
</style>
